<template>
  <div>
    <group label-width="100px" label-margin-right="15px" label-align="left" title="个人信息">
      <x-input title='真实姓名:' v-model="userInfo.name" disabled   placeholder="实名核身自动获取"></x-input>
      <x-input title='身份证号:' v-model="userInfo.idCard" disabled placeholder="实名核身自动获取"></x-input>
    </group>
    <group label-width="100px" label-margin-right="15px" label-align="left" title="地址信息">
      <x-input title='邮箱:' :max="50" v-model="userInfo.email"  placeholder="请输入常用邮箱"></x-input>
      <x-address title="地址选择:" raw-value :list="userInfo.addressData" v-model="userInfo.addressValue"
                 value-text-align="left"></x-address>
      <x-textarea title="详细地址:" placeholder="请输入详细地址" :show-counter="false" :height="150" :rows="6"
                  :cols="15" v-model="userInfo.address"></x-textarea>
    </group>
    <div class="btn-box" style="margin-top: 30px;">
      <x-button type="primary" @click.native="updateMember">保存</x-button>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import {
    Badge,
    Selector,
    XInput,
    XTextarea,
    XButton,
    Group,
    XAddress,
    ChinaAddressV3Data,
    Value2nameFilter as value2name
  } from 'vux'
  export default {
    data(){
      return {
        sessionUser: JSON.parse(localStorage.getItem('user')),
        userInfo: {
          name: '',
          idCard: '',
          addressData: ChinaAddressV3Data,
          addressValue: [],
          address: '',
          email: '',
          idCardAll:''
        }
      }
    },
    created() {
      this.initData();
    },
    methods: {
      initData: function () {
        let _self = this;

        this.axios({
          method: 'get',
          url: global.memberApiUrl + '/member/' + _self.sessionUser.guid
        })
          .then(function (response) {
            if (response.status == "200" && response.data.succ) {
              var member = response.data.data;
              var addressValue = new Array(member.province, member.city, member.area);
              var idNum = member.idNum;
              idNum = idNum.substring(0, 8) + "*********" + idNum.substring(idNum.length - 1, idNum.length)
              _self.userInfo.name = member.realName;
              _self.userInfo.idCard = idNum;
              _self.userInfo.addressValue = addressValue;
              _self.userInfo.address = member.address;
              _self.userInfo.email = member.email;
              _self.userInfo.idCardAll=member.idNum;
            }
          })
          .catch(function (response) {
            console.log(response);
          });
      },
      updateMember: function () {
        let _self = this;

        console.info(_self.userInfo.email);
        console.info(_self.userInfo.address);
        var addressValue = _self.userInfo.addressValue;
        var province = _self.getName([addressValue[0]]);
        var city = _self.getName([addressValue[1]]);
        var area = _self.getName([addressValue[2]]);
        this.axios({
          method: 'put',
          url: global.baseApiUrl + '/member/' + _self.sessionUser.guid,
          data: {
            email: _self.userInfo.email,
            address: _self.userInfo.address,
            province: province,
            city: city,
            area: area,
            realName: _self.userInfo.name,
            idNum: _self.userInfo.idCardAll,
          }
        }).then(function (response) {
          if (response.status == "200" && response.data.succ) {
            setTimeout(function () {
              gotoApp();
              _self.$router.replace({path: '/user'}); //登录成功2s后，则跳转到主页
            }, 2000)
          }
        })
          .catch(function (response) {
            console.log(response);
          });


      },
      getName (value) {
        return value2name(value, ChinaAddressV3Data)
      }
    },

    components: {
      Badge,
      Selector,
      XInput,
      XButton,
      XTextarea,
      XAddress,
      Group
    }
  }

</script>
<style rel="stylesheet/less" lang="less" scoped>
  .register {
    margin: 30px 15px;
    text-align: center;
    a {
      display: inline-block;
      padding: 15px;
      color: #666;
    }
  }
</style>
